@mixin create-icon($name) {
    $mask-image-url: '../../images/' + $name + '.svg';
    -webkit-mask-image: url($mask-image-url);
    -webkit-mask-position: center;
    mask-image: url($mask-image-url);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;
}

$icon-names: (
    'x-close',
    'menu-04',
    'github-fill',
    'github-line',
    'twitter-fill',
    'copy-06',
    'reddit-fill',
    'facebook-circle-fill',
    'server-04',
    'dataflow-03',
    'chevron-up',
    'chevron-left',
    'chevron-right',
    'chevron-down',
    'mastodon-fill',
    'swift-package-index',
    'spotify',
    'john-lewis',
    'allegro',
    'transeo',
    'brackets-check',
    'key-01',
    'database-03',
    'code-browser',
    // 'integration-01',
    'integration-09',
    'alert-octagon',
    'arrow-narrow-up-right',
    'arrow-right',
    'arrow-left',
    'check-circle'
);

@each $name in $icon-names {
    .icon-#{$name} {
        @include create-icon($name);
    }
}

.vapor-icon {
    width: 1em;
    height: 1em;
    display: block;
    overflow: hidden;
    background-color: black;
}
